<template>
  <div id="app">
    <div class="test_wow">
      <section class="wow slideInLeft test_wow" data-wow-duration="2s">
      </section>
      <section class="wow slideInRight test_wow1" data-wow-duration="2s">
      </section>
      <section class="wow slideInLeft test_wow2" data-wow-duration="2s">
      </section>
      <section class="wow slideInRight test_wow3" data-wow-duration="2s">
      </section>
      <section class="wow slideInUp test_wow4" data-wow-duration="2s">
      </section>
      <section class="wow slideInDown test_wow" data-wow-duration="2s">
      </section>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'App',
    mounted() {
      new this.$wow.WOW().init()
    }
  }
</script>

<style>
  .test_wow {
    position: relative;
    width: 50rem;
    height: 400px;
    background: #99CCFF;
    margin: 0 auto;
  }

  .test_wow1 {
    position: relative;
    width: 50rem;
    height: 400px;
    background: #FFFFCC;
    margin: 0 auto;
  }

  .test_wow2 {
    position: relative;
    width: 50rem;
    height: 400px;
    background: #FFCC99;
    margin: 0 auto;
  }

  .test_wow3 {
    position: relative;
    width: 50rem;
    height: 400px;
    background: #0099CC;
    margin: 0 auto;
  }

  .test_wow4 {
    position: relative;
    width: 50rem;
    height: 400px;
    background: #6699CC;
    margin: 0 auto;
  }
</style>